﻿@namespace MudBlazor.Docs.Examples

<MudGrid>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-content-start flex-wrap py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">16</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-content-end flex-wrap py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">16</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-content-center flex-wrap py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">16</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-content-space-between flex-wrap py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">16</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex align-content-space-around flex-wrap px-2" Style="height:250px;">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width:79px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width:79px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width:79px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width:79px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width: 79px; text-align: center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width: 79px; text-align: center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width: 79px; text-align: center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width: 79px; text-align: center;">16</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">17</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">18</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>











